<template>
  <section class="content">
    <div class="row">
      <div class="col-sm-3">
        <div class="box box-info ">
          <div class="box-header with-border">
            <h3 class="box-title">添加商品分类</h3>
          </div>
          <div class="tree border-default">
            <nav class='navbar'>
              <ul class='nav nav-stacked'>
                <template v-for='item in menus'>
                  <li role='presentation' v-if='!item.children'><a href="javascript:void(0);">{{item.text}}</a></li>
                  <li role='presentation' v-if='item.children'><a href="javascript:void(0);" v-on:click='toggleChildren(item)'>{{item.text}}<span class='glyphicon pull-right' v-bind:class='{ "glyphicon-chevron-right": !item.expanded, "glyphicon-chevron-down": item.expanded }'></span></a>
                    <ul v-show='item.expanded' class="childs">
                      <li v-for='child in item.children'><a href="javascript:void(0);">{{child.text}}</a></li>
                    </ul>
                  </li>
                </template>
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <div class="col-sm-2 text-center">
        <img src="@/assets/u4473.png" alt="">
      </div>
      <div class="col-sm-3">
        <div class="box box-info ">
          <div class="box-header with-border">
            <h3 class="box-title">添加商品分类</h3>
          </div>
          <div class="tree border-default">
            <nav class='navbar'>
              <ul class='nav nav-stacked'>
                <template v-for='item in menus'>
                  <li role='presentation' v-if='!item.children'><a href="javascript:void(0);">{{item.text}}</a></li>
                  <li role='presentation' v-if='item.children'><a href="javascript:void(0);" v-on:click='toggleChildren(item)'>{{item.text}}<span class='glyphicon pull-right' v-bind:class='{ "glyphicon-chevron-right": !item.expanded, "glyphicon-chevron-down": item.expanded }'></span></a>
                    <ul v-show='item.expanded' class="childs">
                      <li v-for='child in item.children'><a href="javascript:void(0);">{{child.text}}</a></li>
                    </ul>
                  </li>
                </template>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
    export default {
        name: "addCommodityClassification",
      methods: {
        toggleChildren: function(item) {
          item.expanded = !item.expanded;
        },
      },
      data() {
        return {
          menus:[{
            text:'水果',
            expanded:true,
            children:[{
              text:'苹果',
            },{
              text:'荔枝'
            },{
              text:'葡萄'
            },{
              text:'火龙果'
            }]
          },{
            text:'好吃的',
            expanded:false,
            children:[{
              text:'糖',
            },{
              text:'面包'
            },{
              text:'火腿'
            },{
              text:'薯片'
            },{
              text:'碎碎面'
            }]
          },{
            text:'饮料',
            expanded:false,
            children:[]
          }]
        }
      }
    }
</script>

<style scoped>

</style>
